<style scoped></style>

<template>
    <div>
        <Modal
            title="修改新闻"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form ref="newsForm" label-position="top" :rules="newsRole" :model="news">
                <Row :gutter="16">
                    <Col span="24">
                        <FormItem label="新闻标题" prop="title">
                            <Input v-model="news.title" :maxlength="256" :minlength="2"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="所属类别" prop="newsCategoryId">
                            <Select v-model="news.newsCategoryId" filterable>
                                <Option
                                    v-for="item in cateList"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem prop="showOnHome" label=" ">
                            <Checkbox v-model="news.showOnHome">首页推荐</Checkbox>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem prop="inSlider" label=" ">
                            <Checkbox v-model="news.inSlider">幻灯片</Checkbox>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <FormItem prop="isReprint" label=" ">
                            <Checkbox v-model="news.isReprint">转载</Checkbox>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="封面图片" prop="imageUrl" style="width:100%;">
                    <SinglePicture :width="120" :height="90"  v-model="news.imageUrl" :requestData="{pictureType : 'ArticleImage'}"></SinglePicture>
                </FormItem>
                <FormItem prop="shortDesc" label="简短描述">
                    <Input type="textarea" v-model="news.short"></Input>
                </FormItem>
                <FormItem label="内容详情" prop="content" v-if="value && typeof(news.content) == 'string'">
                    <Editor  @onBlur="editorBlur('content')" v-model="news.content" :init="tinymceInit"></Editor>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import News from "@/store/entities/articles/News";
import SinglePicture from '../../components/single-picture.vue';
import Editor from "@tinymce/tinymce-vue";
import TinymceInit from "@/lib/TinymceInit";
@Component({
    components: {SinglePicture,Editor}
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    news: News = new News();

    tinymceInit = TinymceInit;

    get cateList() {
        return this.$store.state.news.allCateList;
    }
    editorBlur(filedName) {
        (this.$refs.newsForm as any).validateField(filedName)
    }
    save() {
        console.log(this.news);
        (this.$refs.newsForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await this.$store.dispatch({
                    type: "news/update",
                    data: this.news
                });
                (this.$refs.newsForm as any).resetFields();

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.newsForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        } else {
            this.news = Util.extend(true,{},this.$store.state.news.editNews)
        }
    }

    newsRole = {
        title: [
            {
                required: true,
                message: '请输入新闻标题',
                trigger: "blur"
            }
        ],
        content: [
            {
                required: true,
                message: '请输入新闻内容详情',
                trigger: "blur"
            }
        ],
        // imageUrl: [
        //     {
        //         required: true,
        //         message: '请上传封面图片',
        //         trigger: "blur"
        //     }
        // ],
        newsCategoryId: [
            {
                required: true,
                type: 'number',
                message: '请选择所属类别',
                trigger: "change"
            }
        ]
    };
}
</script>